<template>
  <!-- 占位 -->
  <div class="page-form-footer-placeholder"></div>
  <div class="page-form-footer">
    <div class="flex justify-end footer-operater">
      <a-space size="8">
        <a-button @click="cancelFn" v-if="!hideCancel">{{ cancelText }}</a-button>
        <!-- 插槽，默认在有间距 -->
        <slot v-if="slotDefault"></slot>
        <template v-else>
          <a-button v-if="!hideOk" type="primary" :loading="okLoading" @click="submitFn">{{ okText }}</a-button>
        </template>
      </a-space>
    </div>
  </div>
</template>

<script setup>
  import { Modal, Notification } from '@arco-design/web-vue'
  import { useSlots, onMounted, onUnmounted } from 'vue'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateClose } = useNavigate()
  const props = defineProps({
    okLoading: Boolean,
    okText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '关闭',
    },
    hideCancel: {
      type: Boolean,
      default: false,
    },
    hideOk: {
      type: Boolean,
      default: false,
    },
    confirmConfig: Object,
    cancelFn: Function,
    height: {
      type: String,
      default: '70px',
    },
  })

  const emits = defineEmits(['ok'])
  const slotDefault = !!useSlots().default
  const cancelFn = () => {
    props.cancelFn ? props.cancelFn() : navigateClose()
  }

  const submitFn = () => {
    if (!props.confirmConfig) {
      emits('ok', noticeSuccess)
      return
    }
    Modal.confirm({
      ...{
        title: '提示',
        simple: true,
        cancelText: '关闭',
        okText: '确认',
        content: '是否确认提交？',
      },
      ...props.confirmConfig,
      onOk: () => {
        emits('ok', noticeSuccess)
      },
    })
  }

  const noticeSuccess = (msg = '保存成功') => {
    Notification.success({
      content: msg,
      closable: true,
      duration: 3000,
    })
  }
</script>

<style lang="less" scoped>
  .page-form-footer-placeholder {
    height: 60px;
  }
  .page-form-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    .footer-operater {
      height: 60px;
      width: 100%;
      padding: 0 40px;
      box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.1);
      background-color: var(--color-white);
    }
  }
  :deep {
    .arco-btn-primary,
    .arco-btn-primary[type='button'],
    .arco-btn-primary[type='submit'] {
      background-color: rgb(var(--arcoblue-6));
    }
    .arco-btn-primary:hover,
    .arco-btn-primary[type='button']:hover,
    .arco-btn-primary[type='submit']:hover {
      background-color: rgb(var(--arcoblue-5));
    }
    .arco-btn-primary.arco-btn-disabled,
    .arco-btn-primary[type='button'].arco-btn-disabled,
    .arco-btn-primary[type='submit'].arco-btn-disabled {
      background-color: rgb(var(--arcoblue-4));
    }
  }
</style>
